<template>

    <div style="margin-top: 46px">
        <van-nav-bar fixed="true" title="正在聊天" left-text="返回" @click-left="onClickLeft" left-arrow>
        </van-nav-bar>
        <van-pull-refresh style="height: 100%" v-model="isLoading" @refresh="onRefresh">
            <div style="height:700vh;margin-bottom: 150px">
                <div style="margin: 5px;" :key="item" v-for="item in statusLists">
                    <van-cell style="border-radius: 25px">
                        <van-cell style="font-size: x-small">发送时间：{{item.stTime}}</van-cell>
                        <van-cell>内容：{{item.stContent}}</van-cell>
                        <van-cell size="small"><h style="float: right">状态：{{item.stStatus}}</h></van-cell>

                    </van-cell>
                </div>
            </div>
        </van-pull-refresh>
        <van-panel style="position: fixed;bottom:0px;width: 100%;background-color: #efefef">
            <van-field
                    v-model="content"
                    rows="2"
                    autosize
                    label="输入消息"
                    type="textarea"
                    placeholder="请输入消息"
            />
            <div style="width:100%;text-align: right">
                <van-button @click="insertStatus" size="small">发送</van-button>
            </div>
        </van-panel>
    </div>
</template>

<script>
    import Toast from "vant/lib/toast";

    export default {
        name: "chat",
        data() {
            return {
                isLoading: true,
                content: '',
                statusLists: [],
                timer:null
            }
        },

        methods: {
            onClickLeft() {
                this.$router.push({path: 'userChat'})
            },

            // 获取聊天列表
            getStatusList() {
                let user = JSON.parse(localStorage.getItem('token') || '{}');
                this.toUser = user
                console.log(this.toUser)
                this.$axios.post('/status/getStatusList', {
                    "toUser" : this.$route.query.id,//律师id
                    "fromUser": this.toUser.id//本地id
                }, res => {
                    console.log(res)
                    this.statusLists = res.data.data
                },)
            },
            // 发送聊天信息
            insertStatus() {
                let user = JSON.parse(localStorage.getItem('token') || '{}');
                this.toUser = user
                console.log(this.toUser)
                if (!this.content){
                    this.$toast.fail('不能发送空信息~')
                }else {
                    this.$axios.post('/status/insertStatus', {
                        "toUser": this.$route.query.id,
                        "fromUser": this.toUser.id,
                        // "fromUser" : this.$route.query.id,
                        // "toUser" : this.toUser.id,
                        "content": this.content
                    }, res => {
                        this.$toast.success('发送成功！')
                        console.log(res)
                        this.getStatusList()
                        this.content=''
                    })
                }
            },
            onRefresh() {
                setTimeout(() => {
                    this.getStatusList()
                    Toast('刷新成功');
                    this.isLoading = false;
                    this.count++;
                }, 1000);
            },
        },
        created() {
        this.getStatusList()
            // 定时刷新
        //     this.timer = setInterval(() =>{
        //         this.getStatusList()
        //     },2000)
    },
        // destroyed () {
        //     clearInterval(this.timer)
        // }

    }
</script>

<style scoped>

</style>
